<template>
  <div class="head-container">
    <el-form :inline="true" size="small" :model="query">
      <el-form-item label="班级名称">
        <el-input v-model="query.className" placeholder="班级名称" clearable />
      </el-form-item>
      <el-form-item label="选择老师">
        <el-select v-model="query.teacherId" placeholder="选择老师" clearable>
          <el-option v-for="item in teachers" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级状态">
        <el-select v-model="query.classStatus" placeholder="班级状态" clearable>
          <el-option v-for="item in classStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级类型">
        <el-select v-model="query.classType" placeholder="班级类型" clearable>
          <el-option label="全部" value="0" border>全部</el-option>
          <el-option label="一对一" value="1" border>一对一</el-option>
          <el-option label="小组课" value="2" border>小组课</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
        <el-button v-permission="['ADMIN', 'CLASS_ALL', 'CLASS_CREATE']"
          size="small"
          type="primary"
          icon="el-icon-plus" 
          @click="handleAdd">新增班级</el-button>
      </el-form-item>
    </el-form>

    <EditForm ref="form" :teachers="teachers" :is-add="true" />
  </div>
</template>

<script>
  import EditForm from './form'
  export default {
    components: {
      EditForm
    },
    props: {
      query: {
        type: Object,
        required: true
      },
      teachers: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        classStatus: [
          { value: null, label: '全部' },
          { value: 1, label: '未开始' },
          { value: 2, label: '已开始' },
          { value: 3, label: '已挂起' },
          { value: 10, label: '已结班' }
        ]
      }
    },
    methods: {
      toQuery() {
        this.$parent.page = 1
        this.$parent.init()
      },
      handleAdd() {
        this.$refs.form.dialog = true
      }
    }
  }
</script>
